<template>
  <div class="w-full h-fit min-h-full flex flex-col items-center overflow-y-auto relative z-0">
    <img
      src="@/assets/bg.jpg"
      alt=""
      class="absolute inset-0 z--1 w-full h-full object-fill z-[-1]"
    />
    <div class="mt-71px w-422px h-298px relative z-0">
      <img src="@/assets/404.png" alt="" class="absolute inset-0 z--1" />
      <h1 class="absolute bottom-14px w-full text-20px text-#8A8C99 text-center">
        不好啦！該頁面不存在。
      </h1>
    </div>
    <router-link
      to="/"
      class="mt-46px w-fit h-64px rounded-16px bg-gradient-to-r from-#7733FF to-#FF4DC4 px-78px box-border text-24px font-bold text-white leading-[64px] hover:text-white hover:shadow-lg transition-all hover:scale-105"
      >回首頁</router-link
    >
    <h2 class="mt-120px w-1104px text-24px font-bold text-#242633">尋找更多遊戲好友</h2>
    <!-- <div class="w-1104px flex flex-row flex-wrap">
     <a
        href="/zh/skill/57"
        class="group mt-120px w-542px h-180px flex flex-col relative z-0"
        ><img
          src="/assets/bg-skill-card.f340d73a.png"
          alt=""
          class="absolute inset-0 z--1 rounded-16px group-hover:shadow-lg" />
        <div class="absolute left-10px bottom-10px w-182px h-230px rounded-12px overflow-hidden">
          <img
            src="https://data.lita.cool/mgr/skill/202310081723/zh_rov_pc-image.jpeg?width=253&amp;height=320"
            alt=""
            class="w-full h-full object-cover transition-all group-hover:scale-105"
          />
        </div>
        <div class="ml-224px mt-40px w-300px flex flex-col">
          <div class="w-185px h-24px flex flex-row items-center relative z-0">
            <img
              src="https://data.lita.cool/static/skill/skill_57_brick_mini.png"
              alt=""
              class="absolute left-0 inset-y-0 w-24px h-24px z-1"
            />
            <div
              class="absolute left-12px inset-y-0 w-173px h-24px bg-gradient-to-r from-white to-transparent opacity-20 z--2"
            ></div>
            <div class="ml-32px text-14px text-white font-500">傳說對決</div>
          </div>
          <div class="mt-24px leading-24px text-24px font-bold text-white">
            與 傳說對決 陪玩師一起玩
          </div>
          <div class="mt-8px flex flex-row items-center">
            <div class="h-16px leading-16px text-14px text-#C3C8DF font-500">查看更多</div>
            <img
              src=""
              alt=""
              class="ml-4px w-12px h-12px"
            />
          </div></div></a
      ><a
        href="/zh/skill/85"
        class="group mt-120px w-542px h-180px flex flex-col relative z-0 ml-20px"
        ><img
          src="/assets/bg-skill-card.f340d73a.png"
          alt=""
          class="absolute inset-0 z--1 rounded-16px group-hover:shadow-lg" />
        <div class="absolute left-10px bottom-10px w-182px h-230px rounded-12px overflow-hidden">
          <img
            src="https://data.lita.cool/mgr/skill/202310081724/zh_sing_pc-image.jpeg?width=253&amp;height=320"
            alt=""
            class="w-full h-full object-cover transition-all group-hover:scale-105"
          />
        </div>
        <div class="ml-224px mt-40px w-300px flex flex-col">
          <div class="w-185px h-24px flex flex-row items-center relative z-0">
            <img
              src="https://data.lita.cool/static/skill/skill_85_brick_mini.png"
              alt=""
              class="absolute left-0 inset-y-0 w-24px h-24px z-1"
            />
            <div
              class="absolute left-12px inset-y-0 w-173px h-24px bg-gradient-to-r from-white to-transparent opacity-20 z--2"
            ></div>
            <div class="ml-32px text-14px text-white font-500">唱歌</div>
          </div>
          <div class="mt-24px leading-24px text-24px font-bold text-white">
            與 唱歌 陪玩師一起玩
          </div>
          <div class="mt-8px flex flex-row items-center">
            <div class="h-16px leading-16px text-14px text-#C3C8DF font-500">查看更多</div>
            <img
              src=""
              alt=""
              class="ml-4px w-12px h-12px"
            />
          </div></div></a
      ><a href="/zh/skill/68" class="group mt-120px w-542px h-180px flex flex-col relative z-0"
        ><img
          src="/assets/bg-skill-card.f340d73a.png"
          alt=""
          class="absolute inset-0 z--1 rounded-16px group-hover:shadow-lg" />
        <div class="absolute left-10px bottom-10px w-182px h-230px rounded-12px overflow-hidden">
          <img
            src="https://data.lita.cool/mgr/skill/202310081724/zh_chat_pc-image.jpeg?width=253&amp;height=320"
            alt=""
            class="w-full h-full object-cover transition-all group-hover:scale-105"
          />
        </div>
        <div class="ml-224px mt-40px w-300px flex flex-col">
          <div class="w-185px h-24px flex flex-row items-center relative z-0">
            <img
              src="https://data.lita.cool/static/skill/skill_68_brick_mini.png"
              alt=""
              class="absolute left-0 inset-y-0 w-24px h-24px z-1"
            />
            <div
              class="absolute left-12px inset-y-0 w-173px h-24px bg-gradient-to-r from-white to-transparent opacity-20 z--2"
            ></div>
            <div class="ml-32px text-14px text-white font-500">語音聊天</div>
          </div>
          <div class="mt-24px leading-24px text-24px font-bold text-white">
            與 語音聊天 陪玩師一起玩
          </div>
          <div class="mt-8px flex flex-row items-center">
            <div class="h-16px leading-16px text-14px text-#C3C8DF font-500">查看更多</div>
            <img
              src=""
              alt=""
              class="ml-4px w-12px h-12px"
            />
          </div></div></a
      ><a
        href="/zh/skill/118"
        class="group mt-120px w-542px h-180px flex flex-col relative z-0 ml-20px"
        ><img
          src="/assets/bg-skill-card.f340d73a.png"
          alt=""
          class="absolute inset-0 z--1 rounded-16px group-hover:shadow-lg" />
        <div class="absolute left-10px bottom-10px w-182px h-230px rounded-12px overflow-hidden">
          <img
            src="https://data.lita.cool/mgr/skill/202310081724/zh_glory_pc-image.jpeg?width=253&amp;height=320"
            alt=""
            class="w-full h-full object-cover transition-all group-hover:scale-105"
          />
        </div>
        <div class="ml-224px mt-40px w-300px flex flex-col">
          <div class="w-185px h-24px flex flex-row items-center relative z-0">
            <img
              src="https://data.lita.cool/mgr/skill/202303021531/20230302153204.png?width=320&amp;height=320"
              alt=""
              class="absolute left-0 inset-y-0 w-24px h-24px z-1"
            />
            <div
              class="absolute left-12px inset-y-0 w-173px h-24px bg-gradient-to-r from-white to-transparent opacity-20 z--2"
            ></div>
            <div class="ml-32px text-14px text-white font-500">王者榮耀</div>
          </div>
          <div class="mt-24px leading-24px text-24px font-bold text-white">
            與 王者榮耀 陪玩師一起玩
          </div>
          <div class="mt-8px flex flex-row items-center">
            <div class="h-16px leading-16px text-14px text-#C3C8DF font-500">查看更多</div>
            <img
              src=""
              alt=""
              class="ml-4px w-12px h-12px"
            />
          </div></div></a
      >
    </div> -->
  </div>
</template>
<script setup>
// import { ref } from 'vue'
</script>
<style lang="less" scoped></style>
